/*
 * 属性添加
 * @Author: ljb
 * @Date: 2018-03-27 17:53:51
 * @Last Modified by: kanglin
 * @Last Modified time: 2018-06-05 16:41:46
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .v-admin-product-attribute-create {
        min-height: 600px;
    }

</style>
<template>
	<div class="v-admin-product-attribute-create">
		<Row
			type="flex"
			justify="start">
			<i-col push="1">
				<Form
					ref="formValidate"
					:model="formValidate"
					:rules="ruleValidate"
					:label-width="80">

					<Form-item
						:label="$t('attribute.product_mod_id')"
						prop="product_mod_id">
						<Select
							v-model="formValidate.product_mod_id"
							clearable
							filterable
							transfer>
							<Option
								v-for="model in productModels"
								:value="model.id + ''"
								:key="model.id">
								{{ model.name }}
							</Option>
						</Select>
					</Form-item>

					<Form-item
						:label="$t('attribute.name')"
						prop="name">
						<i-input
							v-model="formValidate.name"
							:placeholder="$t('attribute.please_enter_name')"
							type="text" />
					</Form-item>

					<Form-item
						v-for="(value,index) in formValidate.values"
						:key="index"
						:label="$t('attribute.values') + (index + 1)"
						prop="values">
						<Row>
							<i-col span="22">
								<i-input
									v-model="value.name"
									:placeholder="$t('attribute.please_enter_value')"
									type="text"/>
							</i-col>
							<i-col
								:offset="1"
								span="1">
								<Button
									type="error"
									size="small"
									icon="minus"
									@click="deleteSpec(index)"/>
							</i-col>
						</Row>
					</Form-item>

					<Form-item
						:label="$t('attribute.add_or_remove')">
						<Button
							type="success"
							size="small"
							icon="plus"
							@click="addSpec"/>
					</Form-item>

					<Form-item>
						<Button
							type="primary"
							@click="handleSubmit('formValidate')">
							{{ $t('common.submit') }}
						</Button>
						<Button
							type="ghost"
							style="margin-left: 8px"
							@click="handleReset('formValidate')">
							{{ $t('common.reset') }}
						</Button>
					</Form-item>

				</Form>
			</i-col>
		</Row>
	</div>
</template>

<script>
import { validateArrayValue } from 'src/validate';

export default {
	name: 'ProductAttributeCreate',

	props: {
		productModels: {
			type: Object,
			required: true,
		},
	},

	data() {
		return {
			formValidate: {
				name: '',

				product_mod_id: '',

				values: [],
			}, // 新建视频时的表单

			ruleValidate: { // 表单验证规则
				name: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('attribute.name') }),
						trigger: 'blur,change',
					},
				],
				product_mod_id: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('attribute.product_mod_id') }),
						trigger: 'blur,change',
					},
				],
				values: [
					{
						required: true,
						validator: validateArrayValue,
						trigger: 'blur,change',
						name: this.$t('attribute.values'),
					},
				],
			},

		};
	},
	methods: {
		/**
         * 增加属性值
         * @return {undefined}
         */
		addSpec() {
			const param = {
				name: '',
			};

			this.formValidate.values.push(param);
		},

		/**
         * 删除属性值
		 * @param {Number} index {索引值}
         * @return {undefined}
         */
		deleteSpec(index) {
			this.formValidate.values.splice(index, 1);
		},

		/**
         * 提交表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.handleData();
				} else {
					this.$Message.error(this.$t('common.exist_empty_field'));
				}
			});
		},

		/**
         * 重置表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleReset(name) {
			this.$refs[name].resetFields();

			this.formValidate.values = [];
		},

		/**
         * 手动拼接表单数据
         * @return {undefined}
         */
		handleData() {
			const values = this.formValidate.values.map(value => value.name);

			const param = {
				name: this.formValidate.name,

				product_mod_id: this.formValidate.product_mod_id,

				values,
			};

			this.$emit('post', param);
		},

	},
};
</script>
